<template>
  <div>
    <div style="display: flex">
      <img :src="'/project/img/'+productObj.photo" width="300" height="300">
      <div>
        商品名：{{ productObj.name }}<br>
        单价：￥{{ productObj.price }}<br>
        产地：{{ productObj.addr }}<br>
        生产日期：{{ productObj.data }}<br>
        已售出{{ productObj.soldNum }}件<br>
        <el-button type="primary" @click="buy(productObj.id)">购买</el-button>
        <el-button type="primary" @click="$router.push('/shopIndex')">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      productObj: {},
    }
  },
  methods: {
    findById(id) {
      axios.get("/project/product/findById", {
        params: {
          id: id
        }
      }).then(resp => {
        this.productObj = resp.data;
      })
    },
    buy(pid) {
      axios.get("/project/cart/buy", {params: {productId: pid}})
          .then(resp => {
            if (resp.data == "ok") {
              this.$router.push("/shopCart");
            }
          })
    },
  },
  created() {
    this.findById(this.$route.query.id);
  }
}
</script>

<style scoped>

</style>